<template>
  <div class="advert-title" v-if='isTitle' :style="`border-left: 4px solid #${titleColor};`">
    <div class="title">
      <span>{{title}}</span>
      <span>{{enTitle}}</span>
    </div>
    <div class="keyword">
      <span v-for='(val, index) in keywords' :key="index">{{val}}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    enTitle: {
      type: String,
      default: ''
    },
    titleColor: {
      type: String,
      default: 'f00384'
    },
    keywords: {
      type: Array,
      default: () => {
        return []
      }
    },
    isTitle: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {

    }
  }
}
</script>

<style lang='scss' scoped>
@import '../../../scss/_var.scss';

.advert-title {
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin: 10px auto;
  font-size: 12px;
  position: relative;
  .title {
    margin-left: 10px;
  }
  .keyword {
    position: absolute;
    top: 0;
    right: 0;
    span{
      &::after {
        content: '|';
        margin: 0 5px;
      }
      &:last-child::after {
        content: ''
      }
    }
  }
}
</style>
